<template>
  <section class="content-table-container" v-loading="loading">
    <div class="head-checkall" v-if="showCheckAll === 'head'">
      <el-checkbox
        style="margin-right: 20px"
        @change="handleCheckAll"
        v-model="checkAll"
        :disabled="data.length === 0"
        :indeterminate="isIndeterminate"
        >全选</el-checkbox
      >
      <base-header @handleAll="handleAll" v-bind="header" />
      <div v-if="showDropdown">
        <el-dropdown
          trigger="click"
          @command="handleCommand"
          :disabled="drop.disabled"
          :class="dropdownClass[drop.key]"
          @visible-change="(val) => visibleChange(val, drop)"
          placement="bottom-start"
          v-for="(drop, dropIndex) in drops"
          :key="dropIndex"
        >
          <div class="el-dropdown-link">
            {{ drop.label }}<i class="el-icon-arrow-down el-icon--right"></i>
          </div>
          <el-dropdown-menu
            slot="dropdown"
            :class="'content-table-dropdown-menu ' + drop.menuClass"
          >
            <el-dropdown-item
              :command="
                drop.key +
                '-' +
                (drop.optionValue
                  ? dropMenu[drop.optionValue]
                  : dropMenu.value) +
                '&' +
                dropMenu.type
              "
              v-for="(dropMenu, menuIndex) in drop.options"
              :key="menuIndex"
              v-show="!dropMenu.showBtn"
              :disabled="dropMenu.disabled"
            >
              <span>{{
                drop.optionLabel ? dropMenu[drop.optionLabel] : dropMenu.label
              }}</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-button
          size="medium"
          @click="handleAll(button)"
          v-for="(button, buttonIndex) in buttons"
          :key="buttonIndex"
          :disabled="button.disabled"
          :type="button.type"
        >
          {{ button.label }}</el-button
        >
      </div>
    </div>
    <ul class="ct-wrap">
      <el-checkbox-group v-model="keys" @change="changeKey">
        <li class="ct-box" v-for="(item, index) in data" :key="index">
          <el-checkbox class="ct-box__cont" :label="getPropText(item, rowKey)">
            <div
              v-for="(col, colIndex) in columns"
              :key="colIndex"
              class="ct-box__item"
              :title="getPropText(item, col.prop)"
              :style="col.style || ''"
            >
              <label v-show="col.label">{{ col.label }}</label>
              <span
                v-if="col.scopeType === 'model'"
                :title="
                  item.quote
                    ? item.quoteChannelName
                    : item.cmsContent
                    ? item.cmsContent.channelName
                    : getPropText(item, col.prop)
                "
              >
                [{{
                  item.quote
                    ? item.quoteChannelName
                    : item.cmsContent
                    ? item.cmsContent.channelName
                    : getPropText(item, col.prop)
                }}]</span
              >
              <span v-else-if="col.scopeType === 'time'">{{
                $moment(getPropText(item, col.prop))
              }}</span>
              <span v-else-if="col.scopeType === 'status'">{{
                filterStatus(col, getPropText(item, col.prop))
              }}</span>
              <span
                @click="getDetailPush(col, item)"
                v-else-if="col.scopeType === 'link'"
                class="jee-hover-color"
                >{{ getPropText(item, col.prop) }}</span
              >
              <span v-else-if="!col.scopeType">{{
                getPropText(item, col.prop)
              }}</span>
            </div>
          </el-checkbox>
          <el-row class="ct-box__bottom">
            <el-col :span="6">
              <el-popover
                v-if="getPropText(item, status) === 3"
                popper-class="ct-pover"
                placement="right"
                trigger="hover"
              >
                <el-tag
                  slot="reference"
                  size="small"
                  class="ct-box__tag ct-box__only"
                  >{{ getPropText(item, status) | statusFilter }}</el-tag
                >
                <div class="workflow-detail-btn">
                  <span class="label"
                    >当前节点：<span>{{ item.currentNodeName }}</span></span
                  >
                  <el-button
                    type="primary"
                    size="small"
                    @click="handleClickWorkflow(item.cmsContent)"
                    >查看流程</el-button
                  >
                </div>
              </el-popover>
              <!--列表底部左侧状态-->
              <el-tag
                v-else-if="item.cmsContent"
                size="small"
                class="ct-box__tag ct-box__only"
                :class="{
                  'ct-box__green':
                    item.cmsContent && item.cmsContent.status === 10,
                  'ct-box__red':
                    item.cmsContent && item.cmsContent.status === 11,
                  'ct-box__yello':
                    item.cmsContent && item.cmsContent.status === 12,
                }"
                >{{ getPropText(item, status) | statusFilter }}</el-tag
              >
              <span
                v-show="iconIndex < 4"
                v-for="(icon, iconIndex) in item.identIcons"
                :key="iconIndex"
              >
                <el-tooltip
                  class="ct-box__item"
                  :content="icon.label"
                  placement="bottom"
                  effect="light"
                >
                  <i v-if="icon.icon" :class="icon.icon"></i>
                  <el-image
                    v-else-if="icon.img"
                    class="ct-box__tag"
                    :src="icon.img"
                    fit="contain"
                  >
                    <div slot="error" class="image-slot">
                      <i class="el-icon-picture-outline"></i>
                    </div>
                  </el-image>
                  <span v-else class="ct-box__tag">{{ icon.label }}</span>
                </el-tooltip>
              </span>
              <el-popover
                v-if="item.identIcons.length > 4"
                popper-class="ct-pover"
                placement="bottom"
                trigger="hover"
              >
                <span
                  v-for="(icon, iconIndex) in item.identIcons.slice(4)"
                  :key="iconIndex"
                >
                  <el-image
                    v-if="icon.img"
                    class="ct-pover__item"
                    :src="icon.img"
                    fit="contain"
                  >
                    <div slot="error" class="image-slot">
                      <i class="el-icon-picture-outline"></i>
                    </div>
                  </el-image>
                  <span v-else class="ct-pover__item">{{ icon.label }}</span>
                </span>
                <i slot="reference" class="el-icon-more"></i>
              </el-popover>
              &nbsp;
            </el-col>
            <el-col :span="18">
              <div class="ct-box__btns">
                <el-link
                  class="ct-box__btn"
                  v-for="(link, linkIndex) in linkData"
                  :key="linkIndex"
                  :disabled="
                    item.operations && link.power
                      ? item.operations[link.power]
                        ? false
                        : true
                      : false
                  "
                  :underline="false"
                  @click="handleEvent(link.type, link, item)"
                >
                  <i :class="link.icon" v-if="link.icon"></i>
                  {{ link.name }}
                </el-link>
                <span class="ct-box__btn" v-if="popverBtns.length > 0">
                  <el-popover
                    popper-class="ct-pover"
                    placement="bottom"
                    trigger="hover"
                    @show="popoverClick(item)"
                  >
                    <div class="ct-pover__box">
                      <el-link
                        class="ct-pover__item jee-hover-color"
                        v-for="(info, infoIndex) in popverBtns"
                        :key="infoIndex"
                        :underline="false"
                        :disabled="
                          (item.operations && info.power
                            ? item.operations[info.power]
                              ? false
                              : true
                            : false) || info.disabled
                        "
                        @click="handleEvent(info.type, info, item)"
                      >
                        <el-image
                          v-if="info.img"
                          style="width: 14px; height: 14px"
                          :src="info.img"
                          fit="contain"
                        >
                          <div slot="error" class="image-slot">
                            <i class="el-icon-picture-outline"></i>
                          </div>
                        </el-image>
                        {{ info.name }}
                      </el-link>
                    </div>
                    <i slot="reference" class="el-icon-more"></i>
                  </el-popover>
                </span>
              </div>
            </el-col>
          </el-row>
        </li>
      </el-checkbox-group>
      <div
        style="min-height: 60px"
        class="gray t-text-center"
        v-show="data.length === 0"
      >
        暂无数据
      </div>
    </ul>
    <div class="ct-footer">
      <el-pagination
        v-if="showPagination"
        class="ct-pagination"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNo"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        :layout="pageLayout"
        :total="totalCount"
        :next-text="nextText"
        :prev-text="prevText"
        :pager-count="5"
        :hide-on-single-page="false"
        popper-class="jee-border jee-page"
      >
      </el-pagination>
    </div>
  </section>
</template>

<script>
import baseHeader from "@/components/mixins/baseHeader";
export default {
  name: "contentTable",
  mixins: [baseHeader],
  props: {
    loading: {
      type: Boolean,
      default: false,
    },
    showDropdown: {
      type: Boolean,
      default: false,
    },
    showPagination: {
      type: Boolean,
      default: true,
    },
    showCheckAll: {
      type: String,
      default: "",
    },
    header: {
      type: Object,
      default: () => {
        return { showAlertIcon: false };
      },
    },
    drops: {
      type: Array,
      default: () => [],
    },
    buttons: {
      type: Array,
      default: () => [],
    },
    pageSizes: {
      type: Array,
      default: () => [10, 20, 50, 100, 200],
    },
    pageNo: {
      type: Number,
      default: 1,
    },
    pageSize: {
      type: Number,
      default: 10,
    },
    totalCount: {
      type: Number,
      default: 0,
    },
    pageLayout: {
      type: String,
      default: "total, sizes, prev, pager, next, jumper",
    },
    prevText: {
      type: String,
      default: "global.prevPage",
    },
    nextText: {
      type: String,
      default: "global.nextPage",
    },
    status: {
      type: String,
      default: "",
    },
    data: {
      type: Array,
      default: () => {
        return [];
      },
    },
    columns: {
      type: Array,
      default: () => {
        return [];
      },
    },
    ids: {
      type: Array,
      default: () => {
        return [];
      },
    },
    rowKey: {
      type: String,
      default: "id",
    },
    // 标识图标
    identIcons: {
      type: Array,
      default: () => {
        return [];
      },
    },
    // 操作按钮
    linkData: {
      type: Array,
      default: () => {
        return [];
      },
    },
    // 下拉操作按钮
    popverBtns: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      value: "",
      keys: [],
      checkAll: false,
      isIndeterminate: false,
      dropdownClass: {},
    };
  },
  watch: {
    ids(newVal, oldVal) {
      if (newVal !== oldVal) {
        this.keys = this.ids;
        if (this.keys.length !== 0) {
          this.isIndeterminate = false;
        }
      }
    },
    data(newVal, oldVal) {},
  },
  filters: {
    // 循环数组字段
    arrFilter(val) {
      console.log(val);
    },
    statusFilter(val) {
      var arr = [
        "",
        "草稿",
        "初稿",
        "流转中",
        "已审核",
        "已发布",
        "退回",
        "下线",
        "已归档",
        "",
        "智能审核中",
        "违禁内容",
        "审核失败",
      ];
      return arr[parseInt(val)];
    },
  },
  methods: {
    visibleChange(val, item) {
      const cls = val ? "jee-dropdown" : "";
      this.$set(this.dropdownClass, item.key, cls);
    },
    // 页面跳转
    getDetailPush(col, item) {
      if (col.href) {
        var params = {
          id: this.getPropText(item, this.rowKey),
          ...this.setParams(col.params, item),
        };
        this.$routerLink(col.href, col.scopeType, params);
      }
    },
    // 参数整理
    setParams(data, item) {
      var obj = {};
      if (data instanceof Array) {
        data.forEach((v) => {
          this.$set(obj, v.key, this.getPropText(item, v.value));
        });
      }
      return obj;
    },
    // 状态过滤
    filterStatus(col, status) {
      var opt = col.filters.find((v) => v.value === status);
      return opt ? opt.label : "";
    },
    // 底部菜单点击
    handleCommand(command) {
      this.$emit("handleCommand", command);
    },
    // 批量操作
    handleAll(btn) {
      this.$emit("handleBatchAll", this.keys, btn);
    },
    // 右侧弹出层
    popoverClick(item) {
      this.$emit("popoverClick", item);
    },
    // 多选框逻辑
    changeKey(val) {
      const checkedCount = val.length;
      this.checkAll = checkedCount === this.data.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.data.length;
      this.$emit("handleCheckAll", val);
    },
    handleCheckAll(val) {
      var value = val
        ? this.data.map((v) => {
            return this.getPropText(v, this.rowKey);
          })
        : [];
      this.keys = value;
      this.isIndeterminate = false;
      this.$emit("handleCheckAll", this.keys);
    },
    //
    handleEvent(type, btn, item) {
      // this.$emit(`handleEvent${type}`, item, btn)
      this.$emit("handleEventAll", item, btn);
    },
    handleSizeChange(val) {
      this.$emit("handleSizeChange", val);
    },
    handleCurrentChange(val) {
      this.$emit("handleCurrentChange", val);
    },
    // 获取多层字段
    getPropText(item, prop, formatProp) {
      var i = prop.indexOf(".");
      if (i > -1) {
        var data = prop.split(".");
        var obj = item;
        const loop = function (data) {
          if (data instanceof Array) {
            data.forEach((v) => {
              if (obj[v]) {
                obj = obj[v];
              } else {
                obj = "";
              }
            });
          }
        };
        loop(data);
        return obj;
      } else {
        return item[prop];
      }
    },
    // 点击查看流程
    handleClickWorkflow(item) {
      if (item && item.id) {
        this.$emit("handleClickWorkflow", item.id);
      }
    },
  },
};
</script>

<style lang="scss">
.content-table-container {
  .head-checkall {
    height: 36px;
    line-height: 36px;
    margin: 6px 20px 20px;
    display: flex;
    .el-dropdown {
      border: 1px solid #e8e8e8;
      padding: 10px;
      color: #666666;
      border-radius: 4px;
      box-sizing: border-box;
      position: relative;
      font-size: 12px;
      line-height: 1;
      min-width: 145px;
      margin-right: 15px;
      margin-bottom: 10px;
      cursor: pointer;
      .el-icon-arrow-down {
        position: absolute;
        right: 10px;
        top: 7px;
        color: #999999;
        font-size: 16px;
        &::before {
          content: "\e790";
        }
      }
    }
  }
  .ct-wrap {
    width: 100%;
    .el-checkbox-group {
      height: inherit;
      .el-checkbox {
        &__label {
          width: 100%;
          line-height: 15px;
          display: flex;
        }
      }
    }
    .ct-box {
      width: 100%;
      background-color: #fff;
      min-height: 112px;
      box-sizing: border-box;
      border: 1px solid #e8e8e8;
      border-radius: 4px;
      margin-bottom: 20px;
      overflow: hidden;
      &__cont.el-checkbox {
        width: 100%;
        padding: 30px 60px 30px 20px;
        min-height: 75px;
        box-sizing: border-box;
        color: #999999;
        font-weight: 300;
        align-items: center;
        position: relative;
        display: flex;
      }
      &__bottom {
        width: 100%;
        min-height: 36px;
        line-height: 36px;
        background-color: #f9f9f9;
        padding: 0 50px;
        font-size: 12px;
        color: #777777;
        box-sizing: border-box;
      }
      &__btns {
        text-align: right;
      }
      &__item {
        min-width: 30px;
        line-height: 1;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        line-height: 16px;
        color: #999999;
        margin: 0 5px;
        display: inline-block;
      }
      &__tag {
        display: inline-block;
        vertical-align: middle;
        position: relative;
        margin-right: 15px;
        font-size: 14px;
        fill: #666;
        color: #666;
        border: none;
        cursor: pointer;
        &.el-image {
          width: 14px;
        }
      }
      &__only {
        text-align: center;
        /*width: 57px;*/
        height: 26px;
        font-size: 12px;
        line-height: 25px;
        fill: #1ec6df;
        color: #1ec6df;
        background-color: #e6f3f5;
      }
      &__green {
        background-color: #e0f2d6;
        color: #6ac043;
      }
      &__red {
        background-color: #ffc5c5;
        color: #ff0000;
      }
      &__yello {
        background-color: #ffe8c3;
        color: #ff9300;
      }
      &__btn {
        position: relative;
        margin: 0 12px;
        font-size: 12px;
        cursor: pointer;
        .jee-svg-icon {
          font-size: 12px;
          fill: #777777;
          margin-right: 5px;
        }
        &.is-disabled {
          .jee-svg-icon {
            fill: #ccc;
            margin-right: 5px;
          }
        }
      }
    }
  }
  .ct-footer {
    padding-top: 20px;
    .ct-pagination {
      padding: 0 !important;
      display: block;
      float: right;
    }
  }
}
.ct-pover {
  padding: 0 !important;
  min-width: 135px !important;
  &__box {
    padding: 8px 0;
  }
  &__item {
    padding: 0 12px !important;
    line-height: 28px;
    color: #666666;
    display: block !important;
    font-size: 12px;
    .jee-svg-icon {
      font-size: 12px;
      fill: #666;
      margin-right: 8px;
    }
    &:hover {
      background-color: #f3f3f3;
    }
  }
  .workflow-detail-btn {
    padding: 12px 20px 10px;
    .label {
      color: #666666;
      padding-right: 20px;
      span {
        color: #333333;
      }
    }
  }
}
.content-table-dropdown-menu {
  min-width: 145px;
}
</style>
